<template>
    <!-- 文章列表 -->
    <div class="content-list">
        <ul class="section-content">
            <li
                class="content-item"
                v-for="(item, index) in contentList"
                :key="index"
                @click="goArticle(item)"
            >
                <!-- 上方背景图 -->
                <div class="article-thumbnail">
                    <div class="duration-container">
                        <span
                            class="duration-item"
                            v-if="item.contentType === 2"
                        >
                            {{ readTime(item.articleContent) }}
                        </span>
                        <span class="duration-item" v-else>
                            {{ countContent(item.articleContent) }}字
                        </span>
                    </div>
                    <img
                        class="background-image"
                        :style="{
                            background: `linear-gradient(to bottom, rgba(102, 100, 100, 0.096), rgba(243, 239, 239, 0.767)), url('${item.articleCover}') center no-repeat`,
                            'background-size': 'cover',
                        }"
                    />
                    <div class="type-container">
                        <!-- 标注为视频 -->
                        <span class="type-item" v-if="item.contentType === 1">
                            <img-icon name="video" size="2rem" />
                        </span>
                        <!-- 标注为题目 -->
                        <span class="type-item" v-if="item.contentType === 2">
                            <img-icon name="question" size="2rem" />
                        </span>
                        <!-- 标注为文章 -->
                        <span v-else>
                            <img-icon name="article" size="2rem" />
                        </span>
                    </div>
                </div>
                <!-- 内容 -->
                <div class="content-box">
                    <!-- 标签 -->
                    <div class="sub-tag-section">
                        <ul class="tags-container">
                            <li
                                v-for="(tagName, tagsIndex) in item.tagsName"
                                :key="tagsIndex"
                                @click="goArticleList()"
                            >
                                <a class="tag-item" href="#">#{{ tagName }}</a>
                            </li>
                        </ul>
                    </div>
                    <!-- 标题 -->
                    <h3 class="sub-title-section">
                        <a href="" class="title">{{ item.articleTitle }}</a>
                    </h3>
                    <!-- 简介 -->
                    <div class="sub-content-section">
                        <p class="sub-section-content">
                            {{ item.description }}
                        </p>
                    </div>
                    <div class="sub-author-section">
                        <!-- 作者 -->
                        <a href="#" class="author">
                            <i class="el-icon-s-custom"></i>
                            {{ item.userName }}
                        </a>
                        <span class="create-time">
                            <i class="el-icon-date"></i>
                            {{ timestampToTime(item.createTime) }}
                        </span>
                    </div>
                </div>
                <a class="corner-link" href="#">more...</a>
            </li>
        </ul>
    </div>
</template>
<script>
import { mixin } from "@/mixins";
import { countWords, calculateReadTime, timestampToTime } from "@/utils/utils";
import ImgIcon from "./ImgIcon.vue";
export default {
    name: "content-list",
    components: { ImgIcon },
    mixins: [mixin],
    props: ["contentList"],
    methods: {
        goArticle(item) {
            // 视频
            if (item.contentType === 1) {
                this.$router.push({ path: `/video-item/${item.id}` });
            } else if (item.contentType === 2) {
                // 题目
                this.$router.push({ path: `/question/${item.id}` });
            } else {
                // 文章详情
                this.$router.push({ path: `/article-item/${item.id}` });
            }
        },
        //   计算文章的字数
        countContent(content) {
            return countWords(content);
        },
        //   计算阅读文章所需的时间
        readTime(content) {
            return calculateReadTime(this.countContent(content));
        },
        goArticleList(item) {
            // 文章列表
            this.$router.push({ path: `article-list` });
        },
        /**
         * 时间格式化
         */
        timestampToTime(time) {
            return timestampToTime(time);
        },
    },
};
</script>
<style lang="scss" scoped>
@use "../assets/css/content-list.scss";
</style>
